<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Map3D - ECHARTS-GL</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS -->
    <link rel="stylesheet" href="./common.css">
</head>
<body>
<div id="main"></div>
<style>
    #data-count {
        font-size: 30px;
        color: #fff;
        position: absolute;
        z-index: 1000;
        left: 10px;
        bottom: 10px;
    }
</style>
<script src="../node_modules/echarts/dist/echarts.js"></script>
<script src="../dist/echarts-gl.js"></script>
<script src='../node_modules/maptalks/dist/maptalks.js'></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/dat.gui.js"></script>
<script src="js/commonUI.js"></script>
<script>
    var chart = echarts.init(document.getElementById('main'));

    $.getJSON('./data/buildings-ny.json')
        .done(function (data) {

            data = data.slice(0, 2e5);

            chart.setOption({
                maptalks3D: {
                    center: [-74.00274358945177, 40.708643546076274],
                    zoom: 14.83092375925744,
                    pitch: 59.5,
                    bearing: 39,
                    urlTemplate: 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                    altitudeScale: 1,
                    postEffect: {
                        enable: true,
                        screenSpaceAmbientOcclusion: {
                            enable: true,
                            intensity: 1.4,
                            quality: 'high',
                            radius: 7
                        },
                        screenSpaceReflection: {
                            enable: false
                        },
                        depthOfField: {
                            enable: true,
                            blurRadius: 5,
                            focalDistance: 30
                        }
                    },
                    light: {
                        main: {
                            intensity: 3,
                            alpha: -30,
                            shadow: true,
                            shadowQuality: 'high'
                        },
                        ambient: {
                            intensity: 0.
                        },
                        ambientCubemap: {
                            texture: 'asset/pisa.hdr',
                            exposure: 1,
                            diffuseIntensity: 0.8,
                            specularIntensity: 0
                        }
                    }
                },
                series: [{
                    type: 'polygons3D',
                    coordinateSystem: 'maptalks3D',
                    data: data,
                    shading: 'realistic',
                    silent: true,
                    itemStyle: {
                        color: '#aaa'
                    },
                    realisticMaterial: {
                        metalness: 0,
                        roughness: 0.8
                    }
                }]
            });
        });
    window.addEventListener('resize', function () {
        chart.resize();
    });
</script>
</body>
</html>
